<template>
  <div class="c-ph24 c-pt20 c-bg-sgray">
    <div v-for="(item, index) in detailList" :key="index" class="c-br6 c-bg-white c-mb20">
      <div class="c-bd-b1-f6 c-ph24 c-pv14">
        <div class="c-flex-row c-aligni-center">
          <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1">
            <img class="c-brp50 c-ww64 c-hh64" v-lazy="item.avatar || require('@/assets/defult_head.png')" alt="" />
            <div class="c-fs24 c-fc-xblack c-ml24">{{ item.nickname }}</div>
          </div>
          <div class="c-fs24 c-fc-xblack">{{item.tag}}</div>
        </div>
      </div>
      <div class="c-ph24">
        <div class="c-pv24 c-flex-row c-bd-b1-f6">
          <div class="c-ww180 c-hh120 c-br16 c-text-hidden c-p">
            <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.img, require('@/assets/defult270.png'))" />
          </div>
          <div class="c-w0 c-flex-grow1 c-ml24 c-hh120 c-flex-column c-justify-sb">
            <div class="c-fs26 c-fc-xblack c-fw600 c-text-ellipsis1">{{ item.prodName }}</div>
            <div class="c-fs22 c-fc-gray">到账：{{incomeDestMap[item.dest]}}</div>
            <div class="c-fs22 c-fc-gray">结算时间：{{ item.finishAt }}</div>
          </div>
        </div>
      </div>
      <div class="c-pv24 c-ph24 c-flex-row c-justify-sb">
        <div class="c-fs22 c-fc-gray">购买{{typeMap[item.prodType]}}</div>
        <div class="c-fs22 c-fc-gray">到账金额: <span class="c-fc-xmlred">￥{{ item.amount }}</span></div>
      </div>
    </div>
    <loading-status-tem :noData="loadingStatus == 'NO_DATA'" :noMoreData="loadingStatus == 'NO_MORE_DATA'" :noDataText="'暂无明细'" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js"
export default {
  name: 'WithdrawDetailList',
  components: {
    loadingStatusTem,
    CoverImg
  },
  props: [],
  beforeCreate() {

  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      currentMonth: '',
      isLoading: false,
      pageIndex: 1,
      loadingStatus: "NO_MORE_DATA",
      detailList: [],
      incomeDestMap:{
        1: '账户余额',
        2: '微信余额',
        10: '账户余额',
        20: '分账中',
        30: '视频号账户'
      },
      typeMap: global.prodMapType,
    }
  },
  mounted() {
  },
  computed: {

  },
  watch: {
  },
  methods: {
    getDetailList() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + 'members/getUserInvoiceList?month=' + this.currentMonth + '&page=' + this.pageIndex + '&limit=10', res => {
          this.isLoading = false;
          if (this.pageIndex == 1) {
            this.detailList = res.data;
          } else {
            this.detailList = [...this.detailList, ...res.data];
          }
          if (!res.next_page_url) {
            this.loadingStatus = this.pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.loadingStatus = 'HAS_MORE_DATA';
            this.pageIndex++;
          }
          this.isLoading = false;
        });
      }
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(() => {
        if (that.loadingStatus == 'HAS_MORE_DATA') {
          that.getDetailList();
        }
      })
    },
  },
  activated() {
    this.currentMonth = this.$route.query.date;
    setDocumentTitle(this.currentMonth + '月税额及收入明细');// eslint-disable-line
    this.isLoading = false;
    this.pageIndex = 1;
    this.loadingStatus = "NO_MORE_DATA";
    this.detailList = [];
    this.typeMap = global.prodMapType;
    this.typeMap[global.ckFrom.qa] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.answer] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.circusee] = localStorage.getItem("questionCustom") == 1 ? "围观预约" : "围观问题";
    this.typeMap[global.ckFrom.agentApply] = JSON.parse(localStorage.getItem("customName")).agentName;
    this.typeMap[global.ckFrom.partnerApply] = JSON.parse(localStorage.getItem("customName")).partnerName;
    this.typeMap[global.ckFrom.branchApply] = JSON.parse(localStorage.getItem("customName")).branchName;
    this.typeMap[global.ckFrom.cooApply] = JSON.parse(localStorage.getItem("customName")).cooName;
    this.typeMap[global.ckFrom.agencyApply] = JSON.parse(localStorage.getItem("customName")).agencyName;
    this.typeMap[global.ckFrom.agent6Apply] = JSON.parse(localStorage.getItem("customName")).agent6Name;
    this.typeMap[global.ckFrom.agent7Apply] = JSON.parse(localStorage.getItem("customName")).agent7Name;
    this.typeMap[global.ckFrom.agent8Apply] = JSON.parse(localStorage.getItem("customName")).agent8Name;
    this.typeMap[global.ckFrom.agent9Apply] = JSON.parse(localStorage.getItem("customName")).agent9Name;
    this.getDetailList()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="scss">

</style>
